<template>
	<scroll-view
	    class="order"
	    scroll-y
	    @scroll="handleScroll"
	    :scroll-top="scrollTop"
	  >
		<uv-navbar placeholder title="服务订单" @leftClick="leftClick" />
		<view class="box1">
			<uv-tabs :list="tabsList" @click="tabsClick" :current="current" lineColor="#BC2722" />
		</view>
			<ListPage :list="list" @btnClick="btnClick" />
			<view class="box" v-if="list.length==0">
				<uv-gap height="10" bgColor="transparent" />
				<view class="list">
					<view class="empty">
						<uv-empty text="还没有相关订单" icon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/49047202508141010003568.png" />
					</view>
				</view>
			</view>
		<uv-popup ref="popupRef" mode="bottom" round="10">
			<view class="popup-content">
				<view class="flex align-end justify-center">
					<text class="price1">¥{{payAmount}}</text>
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<uv-cell-group :border="false">
					<uv-cell v-for="(item, index) in payList" :key="index" :icon="item.piclink" :title="item.pay_name"
						@click="getPayType(index)" :border="false" titleStyle="font-size:14px">
						<template #value>
							<uv-icon name="checkmark-circle-fill" color="#C52923" size="20"
								v-if="payType == item.type" />
							<uv-icon name="checkmark-circle" color="#B1B1B1" size="20" v-else />
						</template>
					</uv-cell>
				</uv-cell-group>
				<uv-gap height="20" bgColor="transparent" />
				<view class="but">
					<uv-button text="确认付款" color="#C52923" shape="circle" @click="closePopup" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popPwdRef" mode="center" round="10" closeable>
			<view class="popup-content pwd_pop">
				<uv-text text="输入密码" bold="true" size="15" align="center"></uv-text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="flex align-center justify-center padding2">
					<uv-input placeholder="请输入支付密码" type="password" v-model="payPwd" />
				</view>
				<uv-gap height="20" bgColor="transparent"/>
				<view class="but">
					<uv-button text="确认支付" color="#C52923" shape="circle" @click="doPay" />
				</view>
			</view>
		</uv-popup>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onBeforeUnmount
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import ListPage from './components/order_list.vue'
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useRefreshStore
	} from '@/store'
	import {
		getPaymentMethod,
		getServiceOrderList,
		goPay
	} from '@/api'
	const current = ref(0)
	const tabsList = ref([{
			name: '全部'
		}, {
			name: '待付款'
		}, {
			name: '待服务'
		},
		{
			name: '待评价'
		}, {
			name: '已完成'
		}, {
			name: '售后'
		}
	])
	const payList = ref([])
	const payType = ref('')
	const payPwd = ref('')
	const is_third_party_payment = ref(0)
	const leftClick = () => {
		uni.reLaunch({
			url: '/pages/user/index'
		})
	}
	const refreshStore = useRefreshStore()
	const popupRef = ref(null)
	const popPwdRef = ref(null)
	const orderid = ref(0)
	const payAmount = ref(0)
	const page = ref(1)
	const list = ref([])
	const total = ref(0)
	const status = ref(-1)
	const finished = ref(false)
	const getList = async () => {
		finished.value = false;
		if (page.value === 1) list.value = []
		const {
			result
		} = await getServiceOrderList({
			page: page.value,
			limit: 10,
			status: status.value,
		})
		page.value++
		total.value = result.total
		list.value = [...list.value, ...result.data]
		finished.value = list.value.length >= result.total;
	}
	onLoad((option) => {
		if (option.active) {
			current.value = option.active
			status.value = option.active == 5 ? 5 : option.active - 1
		}
		console.log('-------onLoad---------', current.value)
		getList()
	})

	onShow(async () => {
		if (refreshStore.shouldRefresh) {
			current.value = refreshStore.refreshParams?.current || current.value
			status.value = current.value == 5 ? 5 : current.value - 1
			refreshStore.resetRefresh()
			console.log('-------onshow---------', current.value)
			await tabsClick()
		}
	});

	onBeforeUnmount(() => {
		refreshStore.resetRefresh()
	})

	const getPayList = async () => {
		const {
			result
		} = await getPaymentMethod()
		payList.value = result
	}

	const getPayType = (index) => {
		payType.value = payList.value[index].type
		is_third_party_payment.value = payList.value[index].is_third_party_payment
	}

	const tabsClick = async (i) => {
		if (i) {
			current.value = i.index
			status.value = i.index == 5 ? 5 : i.index - 1
		}
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		page.value = 1;
		list.value = []; // 清空旧数据
		await getList(); // 确保数据加载完成
		uni.hideLoading();
	}
	// 添加 scrollTop 控制
	const scrollTop = ref(0)
	const isAtTop = ref(true)
	const handleScroll = (e) => {
	  // 判断是否在顶部
	  isAtTop.value = e.detail.scrollTop <= 10
	  // 如果需要，可以在这里添加其他滚动处理逻辑
	  //console.log('当前滚动位置:', e.detail.scrollTop)
	}
	onPullDownRefresh(() => {
		// 只有在顶部时才执行刷新
		if (isAtTop.value) {
			tabsClick();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		} else {
			// 不在顶部时立即停止刷新
			uni.stopPullDownRefresh();
		}
	})
	onReachBottom(() => {
		if (finished.value) return
		getList()
	})

	const btnClick = async ({type,i}) => {
		if (type === 1) {
			if (list.value[i].after_sales_id > 0){
				uni.navigateTo({
					url: '/pages-home/service/ass_info?id=' + list.value[i].after_sales_id
				})
			} else {
				uni.navigateTo({
					url: '/pages-home/service/service_info?id=' + list.value[i].id
				})
			}
		} else if (type === 2) {
			uni.navigateTo({
				url: '/pages-home/service/modify_order?id=' + list.value[i].id
			})
		} else if (type === 4) {
			if (payList.value.length == 0) {
				await getPayList()
			}
			popupRef.value.open()
			orderid.value = list.value[i].id
			payAmount.value = list.value[i].total_price
			payType.value = list.value[i].pay_type ? list.value[i].pay_type : 'money'
			payList.value.forEach(item => {
				if (item.type == payType.value) {
					is_third_party_payment.value = item.is_third_party_payment
				}
			})
		} else if (type === 5) {
			//售后申请
			uni.navigateTo({
				url: '/pages-home/service/ass_apply?id=' + list.value[i].id
			})
		} else if (type === 6) {
			//评价
			uni.navigateTo({
				url: '/pages-home/service/service_comment?id=' + list.value[i].id
			})
		} else if (type === 7) {
			//售后详情
			uni.navigateTo({
				url: '/pages-home/service/ass_info?id=' + list.value[i].after_sales_id
			})
		}
	}
	const closePopup = async () => {
		popupRef.value.close()
		let params = {
			order_id: orderid.value,
			pay_type: payType.value
		}
		if (is_third_party_payment.value == 0) {
			popPwdRef.value.open()
		} else {
			let result = await goPay(params)
			if (result.code == 200) {
				await tabsClick()
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + orderid.value,
				})
			} else {
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + orderid.value + '&err=' + result.msg,
				})
			}
		}
	}

	const doPay = async () => {
		if (!payPwd.value) return uni.$uv.toast('请输入支付密码')
		popPwdRef.value.close()
		let params = {
			order_id: orderid.value,
			pay_type: payType.value,
			password: payPwd.value
		}
		let result = await goPay(params)
		if (result.code == 200) {
			await tabsClick()
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + orderid.value,
			})
		} else {
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + orderid.value + '&err=' + result.msg,
			})
		}
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>

<style lang="scss" scoped>
	.popup-content {
		padding: 30upx 0;

		.but {
			margin: 0 30upx;
		}
	}

	.pwd_pop{
		width: 600upx;
		text-align: center;
	}
	.padding2 {
		padding: 0 30upx;
	}
	
	.price1 {
		font-size:40upx;
		color:#333;
	}

	.order {
		height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.box {
		padding: 0 30upx;
	}

	.box1 {
		padding: 0 10upx;
	}

	.list {
		.empty {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			min-height: 65vh;
		}
	}
</style>